<template>
  <div class="bg2-fixed"></div>

  <div class="index-container">
    <div class="header">鹤峰县农产品质量安全信息服务系统</div>
    <div>
      <el-button type="success" size="large" plain :icon="Pointer" class="text-xl" @click="enter">
        进入
      </el-button>
    </div>
  </div>

</template>

<style>
.bg2-fixed {
  background-image: url("@/assets/backpic3.jpeg");
  background-size: cover;
  background-attachment: fixed;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* 将背景图片置于最底层 */
}

.index-container {
  @apply flex items-center justify-center flex-col;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header {
  @apply text-green-800 text-5xl font-bold;
  margin-bottom: 40px;
}
</style>

<script lang="ts" setup>
import { Pointer } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';

const router = useRouter()

const enter = () => {
  // 跳转到登录页面
  router.push("/login")
}
</script>